/*
 * @Author: huyu
 * @Date: 2020-06-06 17:44:21
 * @Last Modified by: huyu
 * @Last Modified time: 2020-06-20 21:38:30
 */

// 导航菜单
import React, { Component } from "react"
import style from "./Nav.module.less"

// 导航菜单
const NAV_DATA = [{ name: "首页", url: "/blog" }]

export default class Nav extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 更新导航菜单--修复react服务端渲染window或document不存在的问题
      updateNav: false,
    }
  }

  componentDidMount() {
    this._init()
  }

  // 初始化
  _init = () => {
    this.setState({
      updateNav: true,
    })
  }

  render() {
    return (
      <nav className={style.nav}>
        <ul className={style.ul}>
          {NAV_DATA.map(n => (
            <li key={n.url}>
              <a
                href={n.url}
                className={
                  this.state.updateNav &&
                  new RegExp(`^\\${n.url}`, "i").test(
                    document.location.pathname
                  ) &&
                  style.active
                }
              >
                {n.name}
              </a>
            </li>
          ))}
        </ul>
      </nav>
    )
  }
}
